<template>
	<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : editStatus?'查看': $t('update')"
		:close-on-click-modal="false" :close-on-press-escape="false" @close="stationClose">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="stationName" label="站点名称">
				<el-input v-model="dataForm.stationName" :readonly="editStatus" placeholder="站点名称"></el-input>
			</el-form-item>
			<el-form-item prop="stationLineDTOS" label="所属线路">
				<el-table :data="dataForm.stationLineDTOS" border class="table">
					<el-table-column type="index" label="序号" width="50" align="center" />
					<el-table-column prop="id" label="所属线路" header-align="center">
						<template slot-scope="scope">
							<el-select v-if="!editStatus" v-model="scope.row.lineId" placeholder="请选择" >
								<el-option v-for="item in options1" :key="item.lineId" :label="item.lineName"
									:value="item.lineId"></el-option>
							</el-select>
							<span v-else>{{!scope.row.lineId?'':scope.row.lineId | dynamicText(options1)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="排序" header-align="center">
						<template slot-scope="scope">
							<el-input-number v-if="!editStatus"  v-model="scope.row.sort" controls-position="right" :min="0" label="排序">
							</el-input-number>
							<span v-else>{{scope.row.sort}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="100" v-if="!editStatus">
						<template slot-scope="scope">
							<el-button type="danger" round size="mini" @click="delItem(scope.row,scope.$index)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="table-actions" v-if="!editStatus" @click="add" style="text-align: center;">
					<el-button type="text" icon="el-icon-plus">新增一行</el-button>
				</div>

			</el-form-item>
			<el-form-item v-if="editStatus" prop="createDate" label="登记日期">
				<el-input v-model="dataForm.createDate" readonly placeholder="请输入线路名称"></el-input>
			</el-form-item>
			<el-form-item v-if="editStatus" prop="sysUserName" label="登记人">
				<el-input v-model="dataForm.sysUserName" readonly placeholder="请输入登记人"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer" v-if="!editStatus">
			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	export default {
		data() {
			return {
				visible: false,
				editStatus: false,
				dataForm: {
					id: '',
					stationName: '',
					stationLineDTOS: [{
						lineId: '',
						sort: ''
					}]
				},
				options1: [],
			}
		},
		computed: {
			dataRule() {
				return {
					stationName: [{
						required: true,
						message: '线路名称不能为空',
						trigger: 'blur'
					}],
					stationLineDTOS: [{
						required: true,
						message: '所属线路不能为空',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			init(status) {
				this.visible = true
				if (status) {
					this.editStatus = status
				} else {
					this.editStatus = false
				}
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					if(this.dataForm.stationLineDTOS[0].lineId){
						this.dataForm.stationLineDTOS[0].lineId = ''
						this.dataForm.stationLineDTOS[0].sort = ''
					}
					Promise.all([
						this.getline()
					]).then(() => {
						if (this.dataForm.id) {
							this.getInfo()
						}
					})

				})
			},
			// 新增一行
			add() {
				var obj = {
					lineId: '',
					sort: ''
				}
				this.dataForm.stationLineDTOS.push(obj)
			},
			delItem(i) {
				this.$confirm('此操作删除该行, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataForm.stationLineDTOS.splice(i, 1)
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			// 获取线路信息
			getline() {
				this.$http.get(`/psc/line/list`).then(res => {
					this.options1 = res.data.data
				})
			},
			// 获取信息
			getInfo() {
				this.$http.get(`/psc/station/${this.dataForm.id}`).then(({
					data: res
				}) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}
					this.dataForm = {
						...this.dataForm,
						...res.data
					}
				}).catch(() => {})
			},
			// 关闭弹窗
			stationClose(){
				this.dataForm={
					id: '',
					stationName: '',
					stationLineDTOS: [{
						lineId: '',
						sort: ''
					}]
				}
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				this.$refs['dataForm'].validate((valid) => {
					if (!valid) {
						return false
					}
					var obj = {
						stationId: this.dataForm.id,
						stationName: this.dataForm.stationName,
						stationLineDTOS: this.dataForm.stationLineDTOS
					}
					this.$http[!this.dataForm.id ? 'post' : 'put']('/psc/station', obj).then(({
						data: res
					}) => {
						if (res.code !== 0) {
							return this.$message.error(res.msg)
						}
						this.$message({
							message: this.$t('prompt.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false
								this.$emit('refreshDataList')
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})
		}
	}
</script>
<style scoped>
	.table>>>.cell {
		text-align: center;
	}

	.table-actions {
		background-color: #f1f4f5;
		border: 1px dashed rgba(166, 166, 166, 1);
	}
</style>
